<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
    <script src="/static/js/china.js" th:src="@{js/map/china.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>国内疫情地图</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>

<body>

<!--引入topbar-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--引入sidebar-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='main.html')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">


            <div style="width: 1218px; height: 600px; padding: 0">

                <div id="container11" style="width: 100%; height: 500px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container11'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        animationDuration: 20000,
                        title: {
                            text: '疫情趋势图',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['累计确诊', '累计治愈', '累计死亡', '境外输入', '现存疑似', '现存确诊', '境外输入'],
                            top: '5%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                symbol: 'none',  //取消折点圆圈
                                smooth: true,  //折线平滑
                                name: '累计确诊',
                                type: 'line',
                                stack: '累计确诊',
                                data: [217, 291, 440, 571, 835, 1297, 1985, 2762, 4535, 5999, 7736, 9720, 11821, 14411, 17238, 20471, 24363, 28060, 31211, 34598, 37251, 40174, 42641, 44656, 60921, 63932, 66576, 68584, 70635, 72528, 74279, 75101, 75993, 76392, 77041, 77262, 77779, 78190, 78630, 78959, 79389, 79968, 80174, 80302, 80422, 80565, 80710, 80813, 80859, 80904, 80924, 80955, 80980, 81003, 81021, 81048, 81077, 81116, 81151, 81235, 81300, 81416, 81498, 81600, 81747, 81847, 81960, 82078, 82213, 82341, 82447, 82545, 82631, 82724, 82802, 82875, 82930, 83005, 83071, 83157, 83249, 83305, 83369, 83482, 83597]
                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '累计治愈',
                                type: 'line',
                                stack: '累计治愈',
                                data: [25, 25, 25, 28, 34, 38, 49, 51, 60, 103, 124, 171, 243, 328, 475, 632, 892, 1153, 1542, 2052, 2651, 3283, 3998, 4742, 5915, 6728, 8101, 9425, 10853, 12561, 14387, 16170, 18279, 20673, 22907, 24757, 27353, 29775, 32531, 36157, 39049, 41675, 44518, 47260, 49914, 52109, 53793, 55477, 57143, 58684, 59982, 61567, 62887, 64216, 65649, 67022, 67863, 68799, 69725, 70547, 71284, 71876, 72382, 72841, 73299, 73791, 74196, 74737, 75122, 75600, 75937, 76225, 76415, 76610, 76785, 76984, 77210, 77348, 77450, 77586, 77711, 77838, 77935, 78020, 78145]
                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '累计死亡',
                                type: 'line',
                                stack: '累计死亡',
                                data: [4, 6, 9, 17, 25, 41, 56, 80, 106, 132, 170, 213, 259, 304, 361, 425, 491, 564, 637, 723, 812, 909, 1017, 1114, 1368, 1381, 1524, 1666, 1772, 1870, 2006, 2121, 2239, 2348, 2445, 2595, 2666, 2718, 2747, 2791, 2838, 2873, 2915, 2946, 2984, 3015, 3045, 3073, 3100, 3123, 3140, 3162, 3173, 3180, 3194, 3204, 3218, 3231, 3242, 3250, 3253, 3261, 3267, 3276, 3283, 3287, 3293, 3298, 3301, 3306, 3311, 3314, 3321, 3327, 3331, 3335, 3338, 3340, 3340, 3342, 3344, 3345, 3349, 3349, 3351]

                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '境外输入',
                                type: 'line',
                                stack: '境外输入',
                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                                    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 20,
                                    36, 60, 63, 67, 69, 79, 85, 88, 95, 111, 123, 143, 155, 189, 228,
                                    269, 314, 353, 427, 474, 541,
                                    595, 649, 693, 630, 667, 691, 701, 710, 698, 697, 693, 698, 714, 729, 733, 734, 799, 867]
                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '现存疑似',
                                type: 'line',
                                stack: '现存疑似',
                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                                    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 36, 60, 63, 67, 69, 79, 85, 88, 95, 111, 123, 143, 155, 189, 228, 269, 314, 353, 427, 474, 541, 595, 649, 693, 723, 771, 806, 841, 870, 888, 913, 951, 983, 1042, 1103, 1141, 1183, 1280, 1378]
                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '现存确诊',
                                type: 'line',
                                stack: '现存确诊',
                                data: [188, 260, 406, 526, 776, 1218, 1880, 2631, 4369, 5764, 7442, 9336, 11319,
                                    13779, 16402, 19414, 22980, 26343, 29032, 31823, 33788, 35982, 37626, 38800, 53638, 55823, 56951, 57493, 58010, 58097, 57886, 56810, 55475, 53371, 51689, 49910, 47760, 45697, 43352, 40011, 37502, 35420, 32741, 30096, 27524, 25441, 23872, 22263, 20616, 19097, 17802, 16226, 14920, 13607, 12178, 10822, 9996, 9086, 8184, 7438, 6763, 6279, 5849, 5483, 5165, 4769, 4471, 4043, 3790, 3435, 3199, 3006, 2895, 2787, 2686, 2556, 2382, 2317, 2281, 2229, 2194, 2122, 2085, 2113, 2101]
                            }
                        ]
                    };
                    myChart.clear();
                    myChart.setOption(option,true)

                </script>

            </div>


            <div style="width: 1218px; height: 750px; padding: 0">

                <div id="container13" style="width: 100%; height: 500px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container13'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        animationDuration: 20000,
                        title: {
                            text: '新增疫情趋势图',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['新增确诊', '新增治愈', '新增死亡', '新增疑似'],
                            top: '5%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '新增确诊',
                                type: 'line',
                                stack: '累计确诊',
                                data: [217, 74, 149, 131, 264, 462, 688, 777, 1773, 1464, 1737, 1984, 2101, 2590, 2827, 3233, 3892, 3697, 3151, 3387, 2653, 2923, 2467, 2015, 16265, 3011, 2644, 2008, 2051, 1893, 1751, 822, 892, 399, 649, 221, 517, 411, 440, 329, 430, 579, 206, 128, 120, 143, 145, 103, 46, 45, 20, 31, 25, 23, 18, 27, 29, 39, 35, 84, 65, 116, 82, 102, 147, 100, 113, 118, 135, 128, 106, 98, 86, 93, 78, 73, 55, 75, 66, 86, 92, 56, 64, 113, 115]
                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '新增治愈',
                                type: 'line',
                                stack: '累计治愈',
                                data: [25, 0, 0, 3, 6, 4, 11, 2, 9, 43, 21, 47, 72, 85, 147, 157, 260, 261, 389,
                                    510, 599, 632, 715, 744, 1173, 813, 1373, 1324, 1428, 1708, 1826, 1783, 2109, 2394, 2234, 1850, 2596, 2422, 2756, 3626, 2892, 2626, 2843, 2742, 2654, 2195, 1684, 1684, 1666, 1541, 1298, 1585, 1320, 1329, 1433, 1373, 841, 936, 926, 822, 737, 592, 506, 459, 458, 492, 405, 541, 385, 478, 337, 288, 190, 195, 175, 199, 226, 138, 102, 136, 125, 127, 97, 85, 125]
                            },
                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '新增死亡',
                                type: 'line',
                                stack: '累计死亡',
                                data: [4, 2, 3, 8, 8, 16, 15, 24, 26, 26, 38, 43, 46, 45, 57, 64, 66, 73, 73, 86, 89, 97, 108, 97, 254, 13, 143, 142, 106, 98, 136, 115, 118, 109, 97, 150, 71, 52, 29, 44, 47, 35, 42, 31, 38, 31, 30, 28, 27, 23, 17, 22, 11, 7, 14, 10, 14, 13, 11, 8, 3, 8, 6, 9, 7, 4, 6, 5, 3, 5, 5, 3, 7, 6, 4, 4, 3, 2, 0, 2, 2, 1, 4, 0, 2]
                            },

                            {
                                symbol: 'none',  //取消折点圆圈

                                smooth: true, //折线平滑
                                name: '新增疑似',
                                type: 'line',
                                stack: '现存疑似',
                                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                                    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 16, 24, 3, 4, 2, 10, 6, 3, 7, 16, 12, 20, 12, 34, 39, 41, 45, 39, 74, 47, 67, 54, 54, 44, 30, 48, 35, 35, 29, 18, 25, 38, 32, 59, 61, 38, 42, 97, 98]
                            },
                        ]
                    };

                    myChart.setOption(option)

                </script>

                <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                1000px; margin: auto">
                    <thead>
                    <tr>
                        <th colspan="4">
                            疫情趋势总分析
                        </th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>自1/19以来我国受新冠状肺炎影响,导致许多居民死于病毒之手,但在国家的防控、救治等手段下,渐渐控制了
                            疫情的蔓延。与国外感染情况相比,我国充分体现了一个中国特色社会主义国家的民族凝聚力,以及国家的医学
                            等科学技术实力。虽然一开始低估了病毒的传染能力,导致了病毒的大范围扩散,但很快就采取了积极有效的措
                            施进行防控,并发动国家的力量、人民的力量,迅速的针对这个问题制定了正确的策略,相较而言,欧美国家未能
                            接受我方忠告,未能及时采取有效措施防控,从而导致国外确诊人数越来越多。未来的一段时间,中国将是其他
                            国家抵御新冠病毒的强力后援。
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>

            <div style="width: 1218px; height: 500px; padding: 0">


                <div id="container1" style="width: 50%; height: 300px; float: left"></div>

                <script>
                    var myChart = echarts.init(document.querySelector('#container1'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    var data = [217, 291, 440, 571, 835, 1297, 1985, 2762, 4535, 5999, 7736, 9720, 11821, 14411, 17238, 20471, 24363, 28060, 31211, 34598, 37251, 40174, 42641, 44656, 60921, 63932, 66576, 68584, 70635, 72528, 74279, 75101, 75993, 76392, 77041, 77262, 77779, 78190, 78630, 78959, 79389, 79968, 80174, 80302, 80422, 80565, 80710, 80813, 80859, 80904, 80924, 80955, 80980, 81003, 81021, 81048, 81077, 81116, 81151, 81235, 81300, 81416, 81498, 81600, 81747, 81847, 81960, 82078, 82213, 82341, 82447, 82545, 82631, 82724, 82802, 82875, 82930, 83005, 83071, 83157, 83249, 83305, 83369, 83482, 83597]
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            },
                        },
                        title: {
                            left: 'center',
                            text: '全国累计确诊趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '确诊人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data,
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div id="container2" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container2'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data = [217, 74, 149, 131, 264, 462, 688, 777, 1773, 1464, 1737, 1984, 2101, 2590, 2827, 3233, 3892, 3697, 3151, 3387, 2653, 2923, 2467, 2015, 16265, 3011, 2644, 2008, 2051, 1893, 1751, 822, 892, 399, 649, 221, 517, 411, 440, 329, 430, 579, 206, 128, 120, 143, 145, 103, 46, 45, 20, 31, 25, 23, 18, 27, 29, 39, 35, 84, 65, 116, 82, 102, 147, 100, 113, 118, 135, 128, 106, 98, 86, 93, 78, 73, 55, 75, 66, 86, 92, 56, 64, 113, 115]
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国新增确诊趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '新增确诊人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center;
                         margin: auto; width: 500px">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国累计确诊趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1/19至2/11,累计确诊人数在缓缓增加,2/12日突然激增,估测可能是病毒经过潜伏期后突然爆发,
                                而后累计确诊人数的增长变得稳定上升,应是国家采取的防控措施,阻止了病毒的大规模扩散,最终
                                增长趋势渐渐平稳
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国新增确诊趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1/19至2/11,每日新增确诊人数较上一日有增有减,呈波浪趋势,2/12新增确诊人数激增,而后
                                又恢复成原先波动趋势,最终新增确诊人数增长情况趋于平稳,增长人数在一百上下
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container3" style="width: 50%; height: 300px; float: right"></div>

                <script>
                    var myChart = echarts.init(document.querySelector('#container3'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    var data = [25, 0, 0, 3, 6, 4, 11, 2, 9, 43, 21, 47, 72, 85, 147, 157, 260, 261, 389,
                        510, 599, 632, 715, 744, 1173, 813, 1373, 1324, 1428, 1708, 1826, 1783, 2109, 2394, 2234, 1850, 2596, 2422, 2756, 3626, 2892, 2626, 2843, 2742, 2654, 2195, 1684, 1684, 1666, 1541, 1298, 1585, 1320, 1329, 1433, 1373, 841, 936, 926, 822, 737, 592, 506, 459, 458, 492, 405, 541, 385, 478, 337, 288, 190, 195, 175, 199, 226, 138, 102, 136, 125, 127, 97, 85, 125];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            },
                        },
                        title: {
                            left: 'center',
                            text: '全国新增治愈趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '新增治愈人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data,
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div id="container4" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container4'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data = [25, 25, 25, 28, 34, 38, 49, 51, 60, 103, 124, 171, 243, 328, 475, 632, 892, 1153, 1542, 2052, 2651, 3283, 3998, 4742, 5915, 6728, 8101, 9425, 10853, 12561, 14387, 16170, 18279, 20673, 22907, 24757, 27353, 29775, 32531, 36157, 39049, 41675, 44518, 47260, 49914, 52109, 53793, 55477, 57143, 58684, 59982, 61567, 62887, 64216, 65649, 67022, 67863, 68799, 69725, 70547, 71284, 71876, 72382, 72841, 73299, 73791, 74196, 74737, 75122, 75600, 75937, 76225, 76415, 76610, 76785, 76984, 77210, 77348, 77450, 77586, 77711, 77838, 77935, 78020, 78145]
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国累计治愈趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '治愈人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center;
                         margin: auto; width: 500px">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国累计治愈趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1/19开始,治愈人数增加速度较为缓慢,随着时间的推移,每日治愈人数在大幅上涨,应该是国家方面在
                                新冠状肺炎的治疗上取得了技术突破,积累的足够的经验,能更快的治愈患者,最终累计治愈趋势趋于平
                                稳,猜想应该是国内确诊人数逐日减少的原因,治疗速度渐渐追上了确诊增加速度
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国新增治愈趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1/19开始至4/12所呈现的趋势图是一个先增后降的情况,新增治愈增长的原因猜测可能是医治经验、技术
                                方面得到了提升,最后又降的原因,应该是确诊人数逐渐减少,导致了每日治愈数的下降
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container5" style="width: 50%; height: 300px; float: left"></div>

                <script>
                    var myChart = echarts.init(document.querySelector('#container5'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    var data = [188, 260, 406, 526, 776, 1218, 1880, 2631, 4369, 5764, 7442, 9336, 11319,
                        13779, 16402, 19414, 22980, 26343, 29032, 31823, 33788, 35982, 37626, 38800, 53638, 55823, 56951, 57493, 58010, 58097, 57886, 56810, 55475, 53371, 51689, 49910, 47760, 45697, 43352, 40011, 37502, 35420, 32741, 30096, 27524, 25441, 23872, 22263, 20616, 19097, 17802, 16226, 14920, 13607, 12178, 10822, 9996, 9086, 8184, 7438, 6763, 6279, 5849, 5483, 5165, 4769, 4471, 4043, 3790, 3435, 3199, 3006, 2895, 2787, 2686, 2556, 2382, 2317, 2281, 2229, 2194, 2122, 2085, 2113, 2101];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            },
                        },
                        title: {
                            left: 'center',
                            text: '全国现存确诊趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '现存确诊人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data,
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div id="container6" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container6'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data = [188, 72, 146, 120, 250, 442, 662, 751, 1738, 1395, 1678, 1894, 1983, 2460,
                        2623, 3012, 3566, 3363, 2689, 2791, 1965, 2194, 1644, 1174, 14838, 2185, 1128, 542, 517, 87, -211, -1076, -1335, -2104, -1682, -1779, -2150, -2063, -2345, -3341, -2509, -2082, -2679, -2645, -2572, -2083, -1569, -1609, -1647, -1519, -1295, -1576, -1306, -1313, -1429, -1356, -826, -910, -902, -746, -675, -484, -430, -366, -318, -396, -298, -428, -253, -355, -236, -193, -111, -108, -101, -130, -174, -65, -36, -52, -35, -72, -37, 28, -12];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国新增现存确诊趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '新增现存人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center;
                         margin: auto; width: 500px">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国现存确诊趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>现存确诊是累计确诊与累计治愈的整合,在2/12时,确诊人数激增,导致那几天的现在确诊图示出现大波动,
                                之后随着累计治愈人数的增加,现存确诊人数在不断下降,新增治愈趋势上升越快,现存确诊趋势则下降越快
                                最终是趋于平稳形式
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国新增现存确诊趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1/19至2/11,每日新增现存确诊人数较上一日有增有减,呈波浪趋势,2/12新增人数激增,之后又成负增长,
                                是因为每日的治愈人数打过了没事的确诊人数
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container7" style="width: 50%; height: 300px; float: left"></div>

                <script>
                    var myChart = echarts.init(document.querySelector('#container7'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    var data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 36, 60, 63, 67, 69, 79, 85, 88, 95, 111, 123, 143, 155, 189, 228, 269, 314, 353, 427, 474, 541, 595, 649, 693, 723, 771, 806, 841, 870, 888, 913, 951, 983, 1042, 1103, 1141, 1183, 1280, 1378]
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            },
                        },
                        title: {
                            left: 'center',
                            text: '全国疑似病例趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '疑似病例',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data,
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div id="container8" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container8'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 16, 24, 3, 4, 2, 10, 6, 3, 7, 16, 12, 20, 12, 34, 39, 41, 45, 39, 74, 47, 67, 54, 54, 44, 30, 48, 35, 35, 29, 18, 25, 38, 32, 59, 61, 38, 42, 97, 98];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国新增疑似病例趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '新增疑似病例',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center;
                         margin: auto; width: 500px">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国疑似病例趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>自3/4开始疑似人数在逐日的增加,大概率原因是以为已经度过了危机,而放松了对病毒的防护,从而又有
                                人在大范围与人接触后被确诊
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国新增疑似病例趋势
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>自3/4开始每日新增疑似人数较前一日有升有降</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container9" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container9'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data = [4, 6, 9, 17, 25, 41, 56, 80, 106, 132, 170, 213, 259, 304, 361, 425, 491, 564, 637, 723, 812, 909, 1017, 1114, 1368, 1381, 1524, 1666, 1772, 1870, 2006, 2121, 2239, 2348, 2445, 2595, 2666, 2718, 2747, 2791, 2838, 2873, 2915, 2946, 2984, 3015, 3045, 3073, 3100, 3123, 3140, 3162, 3173, 3180, 3194, 3204, 3218, 3231, 3242, 3250, 3253, 3261, 3267, 3276, 3283, 3287, 3293, 3298, 3301, 3306, 3311, 3314, 3321, 3327, 3331, 3335, 3338, 3340, 3340, 3342, 3344, 3345, 3349, 3349, 3351]
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国累计死亡趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '死亡人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container14" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container14'));
                    var base = +new Date(2020, 0, 18);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data =
                        [4, 2, 3, 8, 8, 16, 15, 24, 26, 26, 38, 43, 46, 45, 57, 64, 66, 73, 73, 86, 89, 97,
                            108, 97, 254, 13, 143, 142, 106, 98, 136, 115, 118, 109, 97, 150, 71, 52, 29, 44, 47, 35, 42, 31, 38, 31, 30, 28, 27, 23, 17, 22, 11, 7, 14, 10, 14, 13, 11, 8, 3, 8, 6, 9, 7, 4, 6, 5, 3, 5, 5, 3, 7, 6, 4, 4, 3, 2, 0, 2, 2, 1, 4, 0, 2];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国新增死亡趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '新增死亡人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国累计死亡趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>尽管自1/19开始每日死亡人数在增减,且呈加速增长趋势,但2/23后增长趋势开始渐渐趋于平稳</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国新增死亡趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1/19至2/11,前期每日新增死亡人数增长较为缓慢,趋势较为稳定,2/12死亡人数激增,猜测可能是
                                之前感染者由于多方面原因变成了重症患者,未能得到及时有效的治愈,2/12日之后又出现了几次波峰波谷,最终在2月底每日新增死亡人数在
                                日益减少。
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container15" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container15'));
                    var base = +new Date(2020, 3, 0);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data = [1075, 1027, 1030, 1024, 1047, 1033, 1095, 1104, 1097, 1092, 1086, 1064]
                    for (var i = 1; i < 13; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '无症状感染者趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '无症状感染者数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container16" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container16'));
                    var base = +new Date(2020, 2, 0);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data =
                        [1, 2, 3, 20, 36, 60, 63, 67, 69, 79, 85, 88, 95, 111, 123, 143, 155, 189, 228,
                            269, 314, 353, 427, 474, 541,
                            595, 649, 693, 630, 667, 691, 701, 710, 698, 697, 693, 698, 714, 729, 733, 734, 799, 867];
                    for (var i = 1; i < 44; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '全国累计境外输入趋势',
                            top: '4%'
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        guid: [{
                            bottom: 20
                        }],
                        series: [
                            {
                                name: '输入人数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: 'rgb(255, 70, 131)'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                },
                                data: data
                            }
                        ]
                    };


                    myChart.setOption(option)


                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                无症状感染者趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>4/1起,无明显症状却确诊人数在1000人左右,表明该病毒潜伏能力极强</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                全国累计境外输入趋势分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>自3/1,境外输入人数在持续上升,这侧面反映了国外友人对中国治愈新冠肺炎技术的认可,至3/28日一直
                                是加速增长的情况,之后渐渐的境外输入人数不再高速增加
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="width: 1218px; height: 600px">
                <div id="container12" style="width: 100%; height: 600px; float: left"></div>
                <script th:inline="javascript">
                    //将图标实例化和容器关联
                    var myChart = echarts.init(document.querySelector('#container12'));
                    // fetch('http://127.0.0.1:8066/api/data')
                    var weburl = [[${webUrl}]]
                    fetch(weburl)
                        .then(res => res.json())
                        .then(res => {
                            // console.log(res) // 获取到的数据
                            var getAreaStat = res.getAreaStat;
                            // 将接口返回的数据进行处理 转为echarts认可的数据
                            var filterData = [];
                            getAreaStat.forEach(item => {
                                filterData.push({
                                    name: item.provinceShortName,
                                    value: item.confirmedCount,
                                    deadCount: item.deadCount,
                                    curedCount: item.curedCount
                                })
                            });

                            console.log(filterData)
                            //配置图标数据信息
                            option = {
                                // 标题
                                title: {
                                    text: '全国累计疫情数据分布图',
                                    left: 'center',
                                    top: '5%'
                                },
                                // 图标的背景
                                background: "#f7f7f7",

                                visualMap: [
                                    {
                                        type: 'piecewise', // continuous连续的 piecewise分段
                                        pieces: [
                                            {min: 10000}, // (10000, Infinity]
                                            {min: 1000, max: 9999}, // (1000, 9999]
                                            {min: 100, max: 999}, // (100, 999]
                                            {min: 10, max: 99}, // (10, 99]
                                            {gt: 0, lte: 9} // (0, 9]
                                        ],
                                        inRange: {
                                            color: ['#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
                                        },

                                        left: '15%',
                                        bottom: '5%'
                                    }
                                ],

                                tooltip: {
                                    // triggerOn: 'click',
                                    formatter: function (params) {
                                        // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                                        console.log(params, 'formatter');
                                        return `地区：${params.name}<br/>确诊：${params.value || 0}人<br/>治愈：${(params.data &&
                                            params.data.curedCount) || 0}人<br/>死亡：${(params.data && params.data.deadCount) || 0}人<br/>`
                                    }
                                },

                                series: [
                                    {
                                        type: 'map', // 当前图标的类型
                                        map: 'china', //当前地图为中国
                                        label: {
                                            // 覆盖物设置
                                            show: true
                                        },
                                        data: filterData
                                    },
                                ]
                            };
                            myChart.setOption(option)
                        })
                </script>
            </div>
        </main>
    </div>
</div>
</body>
</html>






